<script>
let styleInfo = {
  on: { display: "block" },
  off: { display: "none" },
};
export default {
  watch: {
    clientHeight: {
      handler(a, b) {
        if (b) {
          if (a !== b) {
            this.style = styleInfo.off;
          }
        }
      },
    },
  },
  props: {
    gutter: {
      type: Number,
      default: 10,
    },
    labelTest: Array,
    span: {
      type: Number,
      default: 12,
    },
  },
  data() {
    return {
      style: styleInfo.on,
      clientHeight: "",
      buttonStatus: true,
    };
  },
  mounted() {},
  render(h) {
    let hList = [];
    let renderNode = this.$slots.default;
    let renderNodeCopy = renderNode.slice(0, 4);
    renderNodeCopy.forEach((res, index) => {
      hList.push(
        h(
          "ElCol",
          {
            style: {
              "padding-right": "8px !important",
              "padding-left": "8px !important",
              "min-width": "auto",
              flex: "1 1 0%",
              "flex-shrink": "0",
            },
            attrs: { span: this.span },
          },
          [
            h("div", { class: "page-col" }, [
              h(
                "ElFormItem",
                {
                  attrs: {
                    label: this.labelTest[index]?.name || "请传递名称",
                  },
                },
                [res]
              ),
            ]),
          ]
        )
      );
    });
    hList.push(
      h(
        "ElCol",
        {
          style: {
            "padding-right": "8px !important",
            "padding-left": "8px !important",
            "min-width": "auto",
            "flex-shrink": "0",
          },
          attrs: { span: this.span },
        },
        [
          h("ElFormItem", { attrs: { label: "" } }, [
            h("div", { style: this.changeStyle(), class: "page-label" }, ""),
            h(
              "div",
              {
                style: {
                  position: "relative",
                  "font-size": "14px",
                  display: "inline-block",
                  width: "100%",
                },
                class: {
                  "page-w": true,
                },
              },
              [
                h(
                  "ElButton",
                  {
                    class: {
                      "page-style": true,
                    },
                    attrs: {
                      type: "primary",
                    },
                    on: {
                      click: () => {
                        this.onInquire();
                      },
                    },
                  },
                  "查询"
                ),
                h(
                  "ElButton",
                  {
                    class: {
                      "page-style": true,
                    },
                    attrs: {},
                    on: {
                      click: () => {
                        this.onReset();
                      },
                    },
                  },
                  "重置"
                ),
                h(
                  "ElButton",
                  {
                    class: {
                      "page-style": true,
                    },
                  },
                  [
                    h(
                      "div",
                      {
                        on: {
                          click: () => {
                            this.buttonStatus = !this.buttonStatus;
                          },
                        },
                        class: {
                          "page-three": true,
                        },
                      },
                      [
                        h("span", {}, this.buttonStatus ? "展开" : "收起"),
                        h("span", { class: { "page-icon": true } }, ""),
                      ]
                    ),
                  ]
                ),
              ]
            ),
          ]),
        ]
      )
    );

    return h("div", { class: "page" }, [
      h(
        "div",
        {
          class: "herder",
        },
        [
          h("ElRow", { class: "page-row", attrs: { gutter: this.gutter } }, [
            h(
              "ElForm",
              {
                style: {
                  width: "100%",
                },
              },
              hList
            ),
          ]),
        ]
      ),
    ]);
  },
  methods: {
    // 展开收起
    onFolding() {},
    // 样式计算
    changeStyle() {
      this.$nextTick(function () {
        let pageRow = document.querySelector(".page-row");
        this.clientHeight = pageRow.clientHeight;
      });
      return this.style;
    },
    // 查询
    onInquire() {
      console.log(this.$props);
      console.log(1111);
    },
    //重置
    onReset() {
      console.log(2222);
    },
    // 获取slot节点数据
    changeNode() {
      let children = this.$slots.default[0].componentInstance.$children;
      let nodeList = children || this.$slots.default;
    },
  },
};
</script>

<style scoped>
.page-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px !important;
  margin-right: -8px !important;
}
.page {
  background-color: #fff;
  border-radius: 5px;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px 16px 16px 16px;
  /* border: 1px solid red; */
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.page-flexButton {
  display: flex;
}
.page-flexButton > div {
  margin: 0px 13px 0px 0px;
}
.page-all > div {
  margin: 8px 10px;
}
.page-all {
  display: flex;
}
.page-three {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}
.page-three > span:nth-child(1) {
  margin-right: 15px;
  color: #3b9afb;
}
.page-icon:after {
  content: "";
  width: 7px;
  height: 7px;
  position: absolute;
  right: 0;
  bottom: 2px;
  border-left: 2px solid rgb(169, 169, 169);
  border-bottom: 2px solid rgb(169, 169, 169);
  -webkit-transform: translate(0, -135%) rotate(-45deg);
  transform: translate(0, -135%) rotate(-45deg);
}

.page-button ::v-deep .el-button--medium {
  width: 95px;
}
.el-form-item {
  margin-top: 0px;
  margin-bottom: 0px;
}
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0px;
}
::v-deep .el-form-item__label {
  line-height: 16px;
  height: 16px;
  margin-bottom: 8px;
}
.page-style {
  line-height: 1;
  min-width: 80px;
  padding: 8px 15px;
  font-size: 14px;
}
.page-col {
  width: 100%;
  margin-bottom: 16px;
}
.page-w {
  min-width: 300px;
}
::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.page-label {
  line-height: 16px;
  height: 16px;
  margin-bottom: 8px;
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
::v-deep .el-form-item__content {
  line-height: 0px;
}
</style>
